<template>
  <div class="parent">
    <record v-for="(record,index) in predictedRecordList" :key="index" :record="record"></record>
  </div>
</template>

<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import Record from "@/components/Record.vue";

const predictedRecordList = ref(null);

onMounted(() => {
  if (localStorage.getItem('userId') === null) {
    message.warning("您未登录，无法查看记录");
  } else {
    axios.get('/api/predictedRecord/list/' + localStorage.getItem('userId'))
        .then(response => {
          console.log(response);
          if (response.data.code === 200) {
            // 处理查询结果
            predictedRecordList.value = response.data.data;
          }
        })
        .catch(error => {
          message.error("记录查询失败，请稍后重试");
        });
  }
});
</script>

<style scoped>
.parent{
  margin-left: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px; /* 调整列之间的间距 */
  grid-row-gap: 20px;
  justify-content: space-evenly;
  align-content: space-evenly;
}
</style>
